<template>
  <a-row :gutter="10" ref="main" id="main">
    <a-col>
      <a-card>
        <a-row>
          <a-col :span="24" style="margin-bottom: 10px">
            <a-form layout="inline" :form="form" @submit="handleSubmit">
              <a-form-item label="品牌">
                <a-select style="width: 180px" placeholder="请选择品牌" @change="handeleSelectChange" v-model="brand"
                  allow-clear>
                  <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                  <a-select-option :value="item.value" v-for="item in brandList" :key="item.code">
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="货季">
                <a-select style="width: 180px" placeholder="请选择货季" @change="selectSeason" v-model="season" allow-clear>
                  <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                  <a-select-option :value="item.value" v-for="item in seasons" :key="item.code">
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="是否已批注">
                <a-select style="width: 180px" allow-clear placeholder="请选择是否已批注" v-model="commentsFlag">
                  <a-select-option :value="item.value" v-for="item in list" :key="item.value">
                    {{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="是否补传合同">
                <a-select style="width: 180px" allow-clear placeholder="请选择是否补传合同" v-model="contractFlag">
                  <a-select-option :value="10">
                    已补
                  </a-select-option>
                  <a-select-option :value="20">
                    未补
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="名称">
                <a-input placeholder="请输入名称" v-model="name" allow-clear></a-input>
              </a-form-item>

              <a-form-item label="图案编号">
                <a-input placeholder="请输入图案编号" v-model="code" allow-clear></a-input>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit">搜索</a-button>
                <a-button type="primary" @click="resetForm" style="margin-left: 10px">重置</a-button>
                <a-button type="primary" style="margin-left: 10px" @click="add('')">新增</a-button>
                <a-button type="primary" ghost style="margin-left: 10px" @click="toSealup(2)"
                  v-if="showButton">一键封版</a-button>
                <a-button type="primary" ghost style="margin-left: 10px" @click="toSealup(1)">封版</a-button>
                <a-button type="primary" ghost style="margin-left: 10px" @click="toSealup(0)"
                  v-if="showButton">反封版</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <!-- <a-table
      bordered
      :columns="columns"
      :rowKey="record => record.id"
      :data-source="dataSource"
      :pagination="pagination"
      :scroll="{ x: true }"
      @change="handleTableChange"
    >
      <template slot="brand" slot-scope="txt, record">
        <span>{{ getBrand(record.brandCode) }}</span>
      </template>
      <template slot="action" slot-scope="txt, record">
        <a class="mr-10" @click="add(record.id)"><a-icon type="edit" />编辑</a>
        <a class="mr-10" @click="deleteRecord(record)"><a-icon type="delete" />删除</a>
        <a @click="$router.push(`/patternCenter/color?patternId=${record.id}`)"><a-icon type="unordered-list" />颜色列表</a>
      </template>
    </a-table> -->
        <create v-if="showAdd" :patternId="patternId" @close="close"></create>
        <a-modal v-model="visible" title="图片预览" @ok="visible = false" :footer="null" width="60%" :mask="true">
          <div class="previmg">
            <img :src="prevImageUrl" />
          </div>
        </a-modal>
      </a-card>
    </a-col>
    <a-col :md="24" :sm="24">
      <a-card :style="{ marginTop: '24px' }" class="list-content" id="content">
        <div class="ant-pro-pages-list-projects-cardList" style="clear: both">
          <a-list :loading="loading" :data-source="dataSource" :grid="{ gutter: 0 }">
            <div v-if="showLoadingMore" slot="loadMore"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
              <a-spin v-if="loadingMore" />
              <a-button v-else @click="onLoadMore"> loading more </a-button>
            </div>
            <a-list-item slot="renderItem" slot-scope="item">
              <a-card style="cursor: pointer" :id="item.id" class="ant-pro-pages-list-projects-card" hoverable
                :class="{ active: idList.includes(item.id) }">
                <img id="img" slot="cover" v-for="(imgUrl, index) in item.imgUrls" :key="`${item.id}-${index}`"
                  :src="imgUrl ? imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" :alt="imgUrl"
                  @click="prevImg(imgUrl)" />
                <div class="cardItemContent" @click="addColor(item.id)">
                  <h3>图案名称:{{ item.name }}</h3>
                  <p class="title">品牌:{{ item.brandCode }}</p>
                  <p class="price">季节:{{ item.season }}</p>
                  <!-- <p class="price">工号:{{item.jobNumber}}</p> -->
                  <p class="price">编号:{{ item.code }}</p>
                  <p class="price">批注:{{ item.commentsContent }}</p>

                </div>
                <template slot="actions" class="ant-card-actions">
                  <a-icon type="edit" theme="twoTone" @click="add(item.id)" />
                  <a-icon type="delete" theme="twoTone" two-tone-color="#eb2f96" @click="deleteRecord(item)" />
                  <a-icon key="ellipsis" type="unordered-list" style="color: #52c41a"
                    @click="$router.push(`/patternCenter/design/color?patternId=${item.id}&brand=${item.brandCode}`)" />
                  <a style="color: blueviolet;" @click="toContact(item)">
                    合
                  </a>
                </template>
              </a-card>
            </a-list-item>
          </a-list>
        </div>
        <contactInfo v-if="showContact" :patternId="patternId" @closeContact="closeContact"></contactInfo>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import create from './create.vue'
import contactInfo from './contact.vue'
import { pattern } from '@api/pattern/index'
import { postAction } from '@/api/manage'
import { listMixin } from '../util/listMixin'
import { getSystemPro, sealup } from '@api/pattern/index.js'
import Contact from '../../../box/customer/customerList/infoModules/Contact.vue'
const list = [
  {
    title: '已批注',
    value: 10
  },
  {
    title: '未批注',
    value: 20
  }
]
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: '品牌',
    dataIndex: 'brandCode',
    // scopedSlots: { customRender: 'brand' },
    width: 200,
  },
  {
    title: '季节',
    dataIndex: 'season',
  },
  {
    title: '编号',
    dataIndex: 'code',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  mixins: [listMixin],

  components: {
    create,
    contactInfo
  },

  data() {
    return {
      columns,
      seasons: [],
      season: undefined,
      showAdd: false,
      patternId: '',
      idList: [],
      scrollHeight: '',
      urlKey: 'pattern',
      visible: false,
      showButton: false,
      showContact: false,
      pageSize: 10,
      contractFlag: undefined,
      commentsFlag: undefined,
      list,
      loading: false,
      prevImageUrl: '',
      showLoadingMore: false,
      loadingMore: false,
      fetching: false,
      brandList: [],
    }
  },

  computed: {
    getBrand() {
      return function (weid) {
        const brand = this.brands.find((item) => item.weid == weid)
        return brand ? brand.name : ''
      }
    },
  },
  created() {
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function("event.returnValue=false");
    });
  },
  beforeRouteLeave(to, from, next) {
    this.scrollHeight = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset
    next()
  },
  deactivated() {
    sessionStorage.setItem('scrollHeight', this.scrollHeight)
  },
  activated() {
    setTimeout(() => {
      this.$refs.main.scrollTop = document.body.scrollTop = document.querySelector('#main').scrollTop = document.documentElement.scrollTop = this.scrollHeight
    }, 60)
  },
  mounted() {
    this.getsysPro()
    this.getBrandList()
    this.getAccount()
  },
  methods: {
    selectSeason(season) {
      this.season = season
    },
    handeleSelectChange(brand) {
      this.brand = brand
    },
    toSealup(key) {
      if (key == 2) {
        if (!this.brand) {
          this.$message.error('请先选择品牌！')
        } else if (!this.season) {
          this.$message.error('请先选择货季！')
        } else {
          this.sealup(key)
        }
      } else {
        this.sealup(key)
      }
    },
    async sealup(key) {
      const parmas = {
        brandCode: this.brand,
        operation: key,
        patternIds: this.idList,
        season: this.season
      }
      try {
        const res = await sealup(parmas)
        if (res.code == 200) {
          this.$message.success('操作成功')
          this.idList = []
        } else {
          this.$message.success('操作失败')
        }
      } catch (error) {
        console.log(error)
      }
    },
    getAccount() {
      const params = {
        size: 10,
        current: 1,
        jobNumber: this.jobNumber
      }
      try {
        postAction(`${pattern}account/list`, params).then(data => {
          if (data.code == 200) {
            if (data.data.records[0].tag.includes('一键封版')) {
              this.showButton = true
            } else {
              this.showButton = false

            }
          } else {
            this.$message.warning(data.msg)
          }
        })
      } catch (error) {
        this.$message.warning('获取标签失败')
      }
    },
    async getsysPro() {
      try {
        const res = await getSystemPro('season')
        this.seasons = res.data || []
        this.seasons.sort((a, b) => {
          var seasonOrder = ['2020春夏', '2020秋冬', '2021春夏', '2021秋冬', '2022春夏', '2022秋冬', '2023春夏', '2023秋冬']
          return seasonOrder.indexOf(a.code) - seasonOrder.indexOf(b.code)
        })
        console.log(this.seasons)
      } catch (error) {
        console.log(error)
      }
    },
    async getBrandList() {
      const data = {
        jobNumber: this.jobNumber,
      }
      const res = await getSystemPro('brand', data)
      if (res.code == 200) {
        this.brandList = res.data
      } else {
        this.$message.error(res.msg || res.message)
      }
    },
    prevImg(url) {
      if (typeof url == 'string' && url != '') {
        this.prevImageUrl = url
        this.visible = true
      }
    },
    addColor(values) {
      if (this.idList.includes(values)) {
        this.idList = this.idList.filter(item => item != values)
      } else {
        this.idList.push(values)
      }
    },
    close(values, type) {
      this.showAdd = false
      if (type == 0) {
        this.loadData()
      } else {
        this.dataSource.map((item) => {
          if (item.id == values.id) {
            item.season = values.season
            item.brandCode = values.brandCode
            item.name = values.name
          }
        })
      }

    },
    add(patternId) {
      this.showAdd = true
      this.patternId = patternId
    },
    toContact(item) {
      this.showContact = true
      this.patternId = item.id
    },
    closeContact() {
      this.showContact = false
    },
    resetForm() {
      console.log('重置表达')
      this.form.resetFields()
      this.loadData(1)
    },
    // changeEvent(values, operate) {
    //   if (operate == 1) {
    //     this.dataSource.map((item) => {
    //       if (item.id == values.id) {
    //         item.name = values.name
    //         item.brandCode = values.brandCode
    //         item.season = values.season
    //       }
    //     })
    //   } else {
    //     this.loadData()
    //   }
    // },

  },
}
</script>

<style scoped lang="less">
@import './less/index.less';

.active {
  border: 1px solid #40a9ff;
  background: #e6f7ff;
}

.mr-10 {
  margin-right: 10px;
}

.previmg {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    max-width: 300px;
  }
}</style>